<template>
  <div class="container">
	<div id="myChart444" style="width:1000px; height: 1000px"></div>
  </div>
  
</template>
<script>
import { FriLink } from '@/model/friLink'

import * as echarts from 'echarts';

export default {
  data() {
    return {
    }
  },
  
  name: "chart",
  props: {
  },
  
  watch: {

  },
  mounted() {
	setTimeout(() => {
          this.drawLine();
    }, 5200)
  },
  
  methods: {
	redraw(){
		this.drawLine()
    },
	// 渲染折线图
	async drawLine () {
	
	      // 基于准备好的dom，初始化echarts实例
	      //var myChart = echarts.init(document.getElementById('myChart444'));
	      
	      
	      
	      var ROOT_PATH = 'https://echarts.apache.org/examples';
          
	      var chartDom = document.getElementById('myChart444');
	      var myChart = echarts.init(chartDom);
	      var option;
          
		 const result = await FriLink.getDongData()
		  console.info(11111)
		 console.info(result)
		  console.info(11111)
		  
		  
		//const data = [["Income","Life Expectancy","Population","Country","Year"],[42840,81.8,23270465,"Australia",2013],[42213,81.5,35230612,"Canada",2013],[11805,76.5,1362514260,"China",2013],[20122,78.3,11362505,"Cuba",2013],[38788,80.6,5453061,"Finland",2013],[37309,81.7,63844529,"France",2013],[42887,80.7,80565861,"Germany",2013],[40958,82.8,325392,"Iceland",2013],[5244,66.2,1279498874,"India",2013],[35614,83.3,126984964,"Japan",2013],[1392,71.2,24895705,"North Korea",2013],[32684,80.5,49846756,"South Korea",2013],[33360,80.6,4465276,"New Zealand",2013],[63322,81.4,5083450,"Norway",2013],[23144,76.9,38618698,"Poland",2013],[23561,71.3,143367341,"Russia",2013],[18579,76.3,76223639,"Turkey",2013],[36908,81,63955654,"United Kingdom",2013],[51282,78.9,317135919,"United States",2013],[43219,81.8,23622353,"Australia",2014],[42817,81.6,35587793,"Canada",2014],[12609,76.7,1369435670,"China",2014],[20704,78.4,11379111,"Cuba",2014],[38569,80.7,5479660,"Finland",2014],[37218,81.8,64121249,"France",2014],[43444,80.9,80646262,"Germany",2014],[41237,82.8,327318,"Iceland",2014],[5565,66.5,1295291543,"India",2014],[35635,83.4,126794564,"Japan",2014],[1391,71.3,25026772,"North Korea",2014],[33629,80.6,50074401,"South Korea",2014],[33538,80.6,4495482,"New Zealand",2014],[64020,81.5,5147970,"Norway",2014],[23952,77.1,38619974,"Poland",2014],[23293,72.21,143429435,"Russia",2014],[18884,76.4,77523788,"Turkey",2014],[37614,81.2,64331348,"United Kingdom",2014],[52118,79,319448634,"United States",2014],[44056,81.8,23968973,"Australia",2015],[43294,81.7,35939927,"Canada",2015],[13334,76.9,1376048943,"China",2015],[21291,78.5,11389562,"Cuba",2015],[38923,80.8,5503457,"Finland",2015],[37599,81.9,64395345,"France",2015],[44053,81.1,80688545,"Germany",2015],[42182,82.8,329425,"Iceland",2015],[5903,66.8,1311050527,"India",2015],[36162,83.5,126573481,"Japan",2015],[1390,71.4,25155317,"North Korea",2015],[34644,80.7,50293439,"South Korea",2015],[34186,80.6,4528526,"New Zealand",2015],[64304,81.6,5210967,"Norway",2015],[24787,77.3,38611794,"Poland",2015],[23038,73.13,143456918,"Russia",2015],[19360,76.5,78665830,"Turkey",2015],[38225,81.4,64715810,"United Kingdom",2015],[53354,79.1,321773631,"United States",2015]]
		 
			console.info(2222)
		 console.info(result.list)
		  console.info(2222)  
		 const data = result.list
		  
		  console.info(333)
		 console.info(result.titleList)
		  console.info(333)  
		  
		  const countries = result.titleList;
		  
		  const datasetWithFilters = [];
		  const seriesList = [];
		  
		  echarts.util.each(countries, function (country) {
			var datasetId = 'dataset_' + country;
			datasetWithFilters.push({
			  id: datasetId,
			  fromDatasetId: 'dataset_raw',
			  transform: {
				type: 'filter',
				config: {
				  and: [
					{ dimension: 'Year', gte: 1950 },
					{ dimension: 'Country', '=': country }
				  ]
				}
			  }
			});
			seriesList.push({
			  type: 'line',
			  datasetId: datasetId,
			  showSymbol: false,
			  name: country,
			  endLabel: {
				show: true,
				formatter: function (params) {
				  return params.value[3] + ': ' + params.value[0];
				}
			  },
			  labelLayout: {
				moveOverlap: 'shiftY'
			  },
			  emphasis: {
				focus: 'series'
			  },
			  encode: {
				x: 'Year',
				y: 'Income',
				label: ['Country', 'Income'],
				itemName: 'Year',
				tooltip: ['Income']
			  }
			});
		  });
		  


		  
		  option = {
			animationDuration: 10000,
			dataset: [
			  {
				id: 'dataset_raw',
				source: data
			  },
			  ...datasetWithFilters
			],
			title: {
			  text: '职位动态走势'
			},
			tooltip: {
			  order: 'valueDesc',
			  trigger: 'axis'
			},
			xAxis: {
			  type: 'category',
			  nameLocation: 'middle'
			},
			yAxis: {
			  name: 'Income'
			},
			grid: {
			  right: 140
			},
			series: seriesList
		  };
  
		  // console.log(option);
		  myChart.setOption(option);

		

		option && myChart.setOption(option);

		
	}
  
    
  
  },
}
</script>

<style lang="scss" scoped>

</style>
